<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- <h1>axios基础使用</h1>
    <button  id="btn">发送请求</button>
    <script>
        const oBtn = document.getElementById("btn")
        oBtn.onclick =async function(){
            /*
            axios是几个基于promise的http库,可以用在浏览器和node中
            axios请求接收一个配置对象
            */
           
            //当await等待的是成功的promise实例时，则继续向下执行语句，返回当前成功promise的值
            const re =await axios({
                url: "/User",
                method: "get",
                // 自定义请求头,post请求
                headers: {},
                // url参数,必须是一个无格式对象或者URLSearchParams 对象
                // params: {
                //     name: "张三",
                //     age: "20",
                //     sex: "男"
                // },
                params: {
                    name: "张三",
                    age: "20",
                    sex: ""
                },
                //请求体参数
                data: {},
                timeout: 1000
            })
            console.log(re);
        } -->

    <h1>axios的请求别名</h1>
    <button id="btnGet">发送查询get请求</button>
    <button id="btnPost">发送查询post请求</button>
    <button id="btnUpdate">发送查询update请求</button>
    <button id="btnDelete">发送查询delete请求</button>
    <script>
        const oBTnGet = document.getElementById("btnGet")
        const oBtnPost = document.getElementById("btnPost")
        const oBtnUpdate = document.getElementById("btnUpdate")
        const oBtnDelete = document.getElementById("btnDelete")
        // 配置axios并通过不同的请求方式实现增删改查
        oBTnGet.onclick = async function () {
            // 用await来监听axios的状态，await必须在async中使用
            /*
            axios#request(config)
            axios#get(url[, config])
            axios#delete(url[, config])
            axios#head(url[, config])
            axios#options(url[, config])
            axios#post(url[, data[, config]])
            axios#put(url[, data[, config]])
            axios#patch(url[, data[, config]])
            */
            const re = await axios.get("/User", {
                params: {
                    name: "张三",
                    age: "18",
                    sex: "男"
                }
            })
            console.log(re);
            /*
                {data: {…}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
                config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
                data: {code: 10000, mes: '添加成功', data: null}
                headers: {connection: 'keep-alive', content-length: '47', content-type: 'application/json; charset=utf-8', date: 'Tue, 21 Jun 2022 21:49:18 GMT', etag: 'W/"2f-6KG6qnNrCaHt/kp93hwGeWhj6lg"', …}
                request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
                status: 200
                statusText: "OK"
                [[Prototype]]: Object

                axios成功的值这个对象属性解析:
                - config:是axios请求的时候传入的配置对象
                - data:后端响应的数据
                - headers:响应头
                - request:底层真正使用的xhr实例对象
                - status:响应状态码
                - statusText:响应状态描述
            
            */
        }
        

        //怎么看时间戳？？？
        oBtnPost.onclick = async function(){
                const re = await axios.post("/addUser",{
                    name: "张五",
                    age: "18",
                    sex: "男" 
                }) 
            console.log(re.data);
        }

        oBtnUpdate.onclick = async function(){
                const re = await axios.put("/updateuser",{
                    name: "娜美",
                    age: "18",
                    sex: "女" 
                }) 
            console.log(re.data);
        }

        oBtnDelete.onclick = async function(){
                const re = await axios.delete("/deleteuser",{
                params:{
                    name: "娜美",
                    age: "18",
                    sex: "女" 
                }}) 
            console.log(re.data);
        }
        

    </script>
    </script>
</body>

</html>